// 底部导航栏
<template>
    <div class="tabbar-wrap" :style="{height:120+statusBarHeight+'rpx',paddingBottom:statusBarHeight+'rpx'}">
        <ul class=" tabbar">
            <li class="tabbar-item" v-for="(item, index) in navList" :key="index" @click="selectNavItem(index, item.pagePath)">
                <p class="tabbar-icon">
                    <img alt="tabbar-icon" :src="selectNavIndex == index? item.selectedIconPath : item.iconPath">
                </p>
                <p class="tabbar-text" :class="selectNavIndex == index? 'active':''">
                    {{item.text}}
                </p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "Tababr",
    props: {
        selectNavIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            color: "#979795",
            // selectedColor: "#45b7af",
            selectedColor: "#00a2ff",
            navList: [
                {
                    pagePath: "pages/Home/Home",
                    text: "باشبەت",
                    iconPath: "native/tabbar/home.png",
                    selectedIconPath: "native/tabbar/home_full.png"
                },
                {
                    pagePath: "pages/My/My",
                    text: "مېنىڭ",
                    iconPath: "native/tabbar/me.png",
                    selectedIconPath: "native/tabbar/me_full.png"
                },
                {
                    pagePath: "pages/Sort/Sort",
                    text: "تۈرلەر",
                    iconPath: "native/tabbar/sort.png",
                    selectedIconPath: "native/tabbar/sort_full.png"
                }
            ]
        };
    },
    methods: {
        selectNavItem(index, pagePath) {
            /* if (index === this.selectNavIndex) {
                return false;
            } */
            wx.switchTab({
                url: `/${pagePath}`
            });
            // this.bindNavigateTo(pagePath);
        },

        /**
         * 路由跳转
         */
        bindNavigateTo(url) {
            wx.switchTab({
                url
            });
        },
        mounted() {
            wx.getSystemInfo({
                success: res => {
                    console.log(res);
                }
            });
        }
    },
    computed: {
        statusBarHeight() {
            return this.$store.getters.statusBarHeight;
        }
    }
};
</script>

<style lang="scss" scoped>
.tabbar-wrap {
    z-index: 999;
    box-sizing: border-box;
    font-family: "ALKATIP UI";
    position: fixed;
    bottom: 0;
    left: 0;
    height: 92rpx;
    width: 100%;
    padding-top: 6px;
    background-color: #fff;
    // box-shadow: 0 0 2px #c4c4c4;
    .tabbar {
        display: flex;
        padding-top: 20rpx;
        .tabbar-item {
            flex: 1;
            // border-top: 1px solid #eee;
            padding-top: 12rpx;
            margin-top: -12px;
            .tabbar-icon {
                text-align: center;
                position: relative;
                height: 50rpx;
                img {
                    width: 42rpx;
                    height: 42rpx;
                }
            }
            .tabbar-text {
                text-align: center;
                line-height: 50rpx;
                color: #979795;
                font-size: 25rpx;
                transform: scaleX(1.2);
            }
            .active {
                // color: #45b7af;
                color: #00a2ff;
            }
        }
    }
}
</style>